<template>
	<view class="sub-appeal-content">
		<view class="home-top">
			<view class="home-title">申诉详情</view>
			<image src="../../../static/common/sub-back-icon.png" class="sub-back-icon" @tap="backpage"></image>
			<image src="../../../static/common/sbu-home-top-icon.png" class="sub-home-top-icon" @tap="contactKF"></image>
		</view>
		<scroll-view class="appeal-detail-blocl" scroll-y="true">
			<view class="detail-block">
				<view class="appealID">
					<view class="detai-dingdanid">
						<text>订单号：</text>
						{{Info.customerTaskId}}
						<text style="margin-left: 20upx;">复制</text>
					</view>
					<view class="detail-time">
						{{getTime(Info.createTime.time)}}
					</view>
				</view>
				
				<view class="detail-goodsInfo">
					<image :src="getImg(Info.giftImg)" class="goods-img"></image>
					<view class="right-block">
						<view class="good-name">{{Info.giftName}}</view>
						<view class="good-price">垫付：￥{{Info.productActualPrice}}</view>
					</view>
				</view>
				
				<view class="appeal-resion">申诉原因：{{Info.appealTypeName}}</view>
				<view class="appeal-content-text">
					申诉说明：{{Info.content}}
				</view>
				
				<view class="appeal-imgs">
					申诉图片：
					<image  v-if="Info.imgUrl1" @tap="seeImg(0)" :src="getImg(Info.imgUrl1)" class="appealimg"></image>
					<image  v-if="Info.imgUrl2" @tap="seeImg(1)" :src="getImg(Info.imgUrl2)" class="appealimg"></image>
					<image  v-if="Info.imgUrl3" @tap="seeImg(2)" :src="getImg(Info.imgUrl3)" class="appealimg"></image>
					<image  v-if="Info.imgUrl4" @tap="seeImg(3)" :src="getImg(Info.imgUrl4)" class="appealimg"></image>
				</view>
				
				<view class="plant">平台处理历史</view>
			</view>
			
			<view class="messageList" v-if="commentList.length>0">
				<view class="box" v-for="(item,index) in commentList" :key="index">
					<view class="plant-send" :class="{'user-send':item.userType==2}">
						<image v-if="item.userType==0" src="../../../static/common/admin-send.png" class="tag-img"></image>
						<image v-if="item.userType==1" src="../../../static/common/admin-send.png" class="tag-img"></image>
						<image v-if="item.userType==2" src="../../../static/common/user-shensu.png" class="tag-img"></image>
						<view class="msg-detail">
							<view class="text-msg">{{item.content}}</view>
							<view class="mes-time">{{item.commentTime}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="bottom-fixed" v-if="Info.status==0">
				<image src="../../../static/common/appeal-detail-2.png" class="img-btn" @tap="plantIntervention"></image>
				<image src="../../../static/common/appeal-detail-3.png" class="img-btn" @tap="cancleAppeal"></image>
				<image src="../../../static/common/appeal-detail-1.png" class="img-btn" @tap="sendMessage"></image>
			</view>
			
		</scroll-view>
		
		<!-- 回复申诉 -->
		<uni-popup ref="showshare" :type="type" style="z-index: 2000!important;">
			<view class="uni-share">
				<view class="tip-block">
					<view class="title-tex">
						<view class="text">回复申请</view>
						<image src="../../../static/common/item-04.png" class="send-btn" @tap="send"></image>
					</view>
					<view class="conten-box">
						<textarea placeholder="请在此输入..." class="text-area" v-model="message"></textarea>
					</view>
				</view>
			</view>
		</uni-popup>
		
		
		
	</view>
</template>

<script>
	import uniPopup  from'../../../components/uni-popup/uni-popup.vue'
	export default{
		name:"appealDetail",
		data(){
			return{
				apptoken:"",
				isinit:false,
				type:"bottom",
				message:"",//回复申诉
				appealId:"",
				imgList:[],//申诉中的图片
				Info:"",
				commentList:[],//信息列表，包括管理员0，商家1，用户2 
				t:false,//申请平台介入
			}
		},
		components:{
			uniPopup
		},
		onLoad(optinos) {
			this.appealId = optinos.appealId;
			this.apptoken = uni.getStorageSync("apptoken");
			//申请详情
			this.getAppealDetail();
		},
		methods:{
			getImg(img){
				return	this.$CommonJS.getBaseImgUrl(img);
			},
			getTime(time){
				return this.$CommonJS.getTime(time,1)
			},
			cancleAppeal(){
				//完成申诉
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.appeal_complete,
					data:{ apptoken:this.apptoken, appealId:this.appealId },
					success(res) {
						console.log(res);
						if(res.data.success){
							uni.showToast({
								title:"已完成"
							})
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					}
				})
			},
			plantIntervention(){
				const _this = this;
				//平台介入
				uni.showModal({
					title:"温馨提示",
					content:"申诉满6个小时后，才可申请官方介入",
					success(res){
						if(res.confirm){
							if(_this.t){
								//介入
								uni.request({
									url:_this.$API.URL + _this.$API.appeal_kfflag,
									data:{ apptoken:_this.apptoken, appealId:_this.appealId },
									success(res) {
										console.log(res);
										if(res.data.success){
											uni.showToast({
												title:"平台介入成功"
											})
										}else{
											_this.$CommonJS.showToast(res.data.msg)
										}
									}
								})
							}else{
								_this.$CommonJS.showToast("当前申诉未达到6小时");
							}
						}
					}
				})
			},
			seeImg(index){
				//图片预览
				console.log(this.imgList)
				uni.previewImage({
						urls: this.imgList,
						current:index,
						indicator:"number",
						loop:true,
				});
			},
			getAppealDetail(){
				//申诉详情
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.appeal_view,
					data:{apptoken:this.apptoken,appealId:this.appealId},
					success(res) {
						console.log(res);
						if(res.data.success){
							const d = res.data.data;
							_this.Info = d;
							
							//计算时间
							const endTime = d.createTime.time + 21600000;
							const nowTime = new Date().getTime();
							const t = endTime - nowTime;
							if(t<0){
								//超过6小时了，可以申请平台介入
								_this.t = true;
							}
							//处理图片预览
							_this.commentList = d.commentList;
							if(d.imgUrl1){
								_this.imgList.push(_this.$CommonJS.getBaseImgUrl(d.imgUrl1))
							}
							if(d.imgUrl2){
								_this.imgList.push(_this.$CommonJS.getBaseImgUrl(d.imgUrl2))
							}
							if(d.imgUrl3){
								_this.imgList.push(_this.$CommonJS.getBaseImgUrl(d.imgUrl3))
							}
							if(d.imgUrl4){
								_this.imgList.push(_this.$CommonJS.getBaseImgUrl(d.imgUrl4))
							}
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					}
				})
			},
			send(){
				//回复申诉
				const _this = this;
				if(!this.message){
					this.$CommonJS.showToast("请输入内容")
					return;
				}
				uni.request({
					url:this.$API.URL + this.$API.appeal_reply,
					data:{
						apptoken:this.apptoken,
						appealId:this.appealId,
						content:encodeURI(this.message)
					},
					success(res) {
						console.log(res);
						if(res.data.success){
							uni.showToast({
								title:"回复成功"
							})
							var timestamp=new Date().getTime();
							const msg = {
								"userType": 2,
								"commentTime":_this.$CommonJS.getTime(timestamp,1),
								"content": _this.message
							}
							
							
							_this.commentList.push(msg);
							_this.message ="";
							
							_this.$refs['showshare'].close();
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					}
				})
			},
			sendMessage(){
				this.$refs['showshare'].open();
			},
			cancel(type) {
				this.$refs['show' + type].close();
				//this.$CommonJS.navigateTo('../orderBack/order-back')
			},
			backpage(){
				this.$CommonJS.navigateBack();
			},
			contactKF(){
				this.$CommonJS.navigateTo('../../subBack/sub-kefu/sub-kefu')
			}
		}
	}
</script>

<style scoped>
	@import url("sub-appealDetail.css");
</style>
